<template>
	<view>
		<view class="uni-status"></view>
		<view class="navTitle">
			<view class="img">
				<image src="../../static/image/follow/icon_jinru2@3x.png" mode=""></image>
			</view>
			<view class="quanOrder" @click="quanma()" :class="{quanmaClass:this.quanmaClass==true}">
				券码订单
			</view>
			<view class="wuliuOrder" @click="wuliu()" :class="{wuliuClass:this.wuliuClass == true}">
				物流订单
			</view>
		</view>
		<!-- 没有订单 -->
		<view class="section-1">
			<view class="img"><image src="../../static/image/follow/ZWGZ@3x.png" mode=""></image></view>
			<view class="text-2">你还没有下单哟</view>
			<view class="goTofollow" @click="goTofollow">前往下单</view>
		</view>
		<!-- 关注列表 -->
		<view class="section-2">
			<!-- 分段组件 -->
			<view>
				<glance v-on:clickKeyword="clickKeyword" :data="keyList"></glance>
				<!-- <view class="demoList" v-for="(item, index) in list" :key="index"></view> -->
			<!-- 	<view v-for="(item, index) in order_list_all">
					1111
				</view> -->
				<shop-lst @payNow="payNow" @cancelPay='cancelPay' @service='service' @couponCode='couponCode' @moreOne='' @feedback='feedback' @deleteOrder = 'deleteOrder' @contact='contact' @track='couponCode' @goDetails='goDetails(item)' v-for="(item, index) in order_list_all" :param="item" :listStyle="0"></shop-lst>
				
			</view>
		</view>
		<!-- 底部导航栏 -->
		<wyg-bottom-tab-withcenter tabIndex="4" :tabListParent="tabList"></wyg-bottom-tab-withcenter>
		<dialogview v-show="dialogFlag" @cancel="cancel" @confirm="confirm" :param="dialogView"></dialogview>
	</view>
</template>

<script>
import dialogview from "../../components/dialogView.vue"//弹窗组件
import wygBottomTabWithcenter from '@/components/wyg-bottom-tab/wyg-bottom-tab-withcenter.vue'; //底部组件
import TAB_LIST from '../../static/wyg-bottom-tab/js/botoom-list2.js'; //底部组件js
import glance from '@/components/jm-glance/jm-glance.vue';//分段组件
import shopLst from '@/components/shopLst';//订单组件
export default {
	components: {
		wygBottomTabWithcenter,
		glance,
		shopLst,
		dialogview
	},
	data() {
		return {
			tabList: TAB_LIST, //底部栏数据
			//分段
			keyList: [
				{
					title: '全部',
					id: '-1'
				},
				{
					title: '待付款',
					id: '0'
				},
				{
					title: '待使用',
					id: '1'
				},
				{
					title: '已完成',
					id: '3'
				},
				{
					title: '售后/退款',
					id: '5'
				},
			], 
			current: 0,
			quanmaClass:true,
			wuliuClass:false,
			order_list_all:[1,2,3],
			dataPost:{
				type:1,
				status:-1,
			},
			dialogView:{
				style:0,  // 弹出框的样式： 0 1 2
				title:'提示',//弹出层的标题
				content:'确定要这样做吗确定要这样做吗确定要这样做吗确定要这样做吗？',//弹出层的内容
				cancelText:'取消',//取消按钮的文本
				confirmText:'确认',//确认按钮的文本
				data:{code:1000}
			},
			dialogFlag:false,
		};
	},
	onLoad(){
		this.allList();
	},
	methods: {
		// 订单详情页
		goDetails:function(item){
			uni.navigateTo({
				url:"./orderDetail?id="+item.id + "&status="+item.status
			})
		},
		// 跳转反馈页面
		feedback:function(item){
			uni.navigateTo({
				url:"./orderFeedback?id="+item.id
			})
		},
		// 申请售后
		service:function(item){
			uni.navigateTo({
				url:"./orderService?id="+item.id
			})
		},
		// 查看券码按钮
		couponCode:function(item){
			uni.navigateTo({
				url:"./orderDetail?id="+item.id
			})
		},
		// 删除订单
		deleteOrder:function(item){
			this.dialogView={
				style:0,  // 弹出框的样式： 0 1 2
				title:'提示',//弹出层的标题
				content:'确定删除当前订单？',//弹出层的内容
				cancelText:'暂不',//取消按钮的文本
				confirmText:'确定',//确认按钮的文本
				data:item
			}
			this.confirm=this.delOrder;
			this.dialogFlag = true;
		},
		// 确认删除订单
		delOrder:function(item){
			let delData={
				id:item.id
			}
			this.ajaxJson('delOrder', delData, res => {
				uni.showToast({
					title: '删除成功',
					icon: 'none',
					duration: 2000
				});
				this.allList();
				this.dialogFlag = false
			});	
		},
		// 联系客服
		contact:function(item){
			this.dialogView={
				style:0,  // 弹出框的样式： 0 1 2
				title:'提示',//弹出层的标题
				content:'客服电话:'+item.shop_phone,//弹出层的内容
				cancelText:'取消',//取消按钮的文本
				confirmText:'拨打',//确认按钮的文本
				data:item
			}
			this.confirm=this.boda;
			this.dialogFlag = true;
		},
		// 拨打电话
		boda:function(item){
			console.log("确认拨打电话");
			uni.makePhoneCall({
				phoneNumber: String(item.shop_phone)
			})
			this.dialogFlag = false
		},
		// 加载全部数据
		allList:function(){
			this.ajaxJson('list', this.dataPost, res => {
				this.order_list_all = res;
			});
		},
		//跳转关注管理页
		goTofollow: function() {
			uni.navigateTo({
				url: './followManage'
			});
		},
		quanma:function(){
			this.quanmaClass=true;
			this.wuliuClass=false;
			this.dataPost.type=1;
			this.allList();
		},
		wuliu:function(){
			this.quanmaClass=false;
			this.wuliuClass=true;
			this.dataPost.type=2;
			this.allList();
		},
		// 立即支付
		payNow:function(item){
			console.log('立即支付');
		},
		// 取消支付
		cancelPay:function(item){
			this.dialogView={
				style:0,  // 弹出框的样式： 0 1 2
				title:'提示',//弹出层的标题
				content:'确定取消当前订单？',//弹出层的内容
				cancelText:'暂不',//取消按钮的文本
				confirmText:'确定',//确认按钮的文本
				data:item
			}
			this.confirm = this.cancelPayConfirm
			this.dialogFlag = true;
			console.log('取消');
		},
		cancel:function(){
			this.dialogFlag = false;
		},
		confirm:function(){
			
		},
		// 确认取消订单
		cancelPayConfirm:function(item){
			let cancelData={
				id:item.id
			}
			this.ajaxJson('cancelOrder', cancelData, res => {
				uni.showToast({
					title: '订单取消成功',
					icon: 'none',
					duration: 2000
				});
				this.allList();
				this.dialogFlag = false
			});
		},
		//分段器
		clickKeyword(e) {
			// uni.showToast({
			// 	title: '点击选项卡，id为：' + e.key + ',内容为：' + e.name,
			// 	icon: 'none',
			// 	duration: 2000
			// });
			this.dataPost.status=e.key;
			this.allList();
			this.list = [];
			var arr = [e.name, e.name, e.name, e.name, e.name, e.name, e.name, e.name];
			this.list = arr;
		}

	}
};
</script>

<style lang="scss" scoped>
page {
	margin-bottom: 160rpx;
	background-color: #FFFFFF;
}
// 设置右上角管理
.navTitle{
	width: 100%;
	background-color: #FFFFFF;
	padding: 20rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.img{
		width: 40rpx;
		height: 40rpx;
		 image{
			 width: 100%;
			 height: 100%;
		 }
	}
	.quanOrder{
		font-size: 34rpx;
		margin: 0 20rpx;
		padding-bottom: 10rpx;
		
	}
	.wuliuOrder{
		font-size: 34rpx;
		margin: 0 20rpx;
		padding-bottom: 10rpx;
	}
	.quanmaClass{
		border-bottom: 2px #FD6431 solid;
		font-weight: bold;
		font-size: 40rpx;
	}
	.wuliuClass{
		border-bottom: 2px #FD6431 solid;
		font-weight: bold;
		font-size: 40rpx;
	}
}
.section-1 {
	display: flex;
	display: none; //没有关注隐藏
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	.img {
		width: 400rpx;
		height: 400rpx;
		margin: 200rpx auto 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.text-2 {
		color: #AAAAAA;
		font-size: 32rpx;
	}
	.goTofollow {
		width: 80%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		border-radius: 50rpx;
		font-size: 36rpx;
		margin: 50rpx auto;
		background: linear-gradient(to top, #fd6431, #ff9972);
	}
}
.section-2{
	margin: 10rpx 0 0;
}
</style>
